<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3属性前缀说明</title>
    <style>

        /*
        简介:
            1. CSS3前缀用于区分并兼容各大主流浏览器对于CSS新功能的支持。
                - 例如，Safari和Chrome的前缀是-webkit。 Chrome，Safari和Mozilla目前支持border-radius属性，只要它带有浏览器前缀即可生效。
        */

        div {
            border :1px solid green;
            /*
            说明:
                1. 通过添加前缀，能使CSS样式在不受支持的浏览器中生效。有时候为了兼容更多的浏览器，你可能需要对同一个样式属性进行重复定义增加不同的前缀。
                2. 为了使样式能兼容各种浏览器，前缀的写法可能较为重复，但是这只是暂时的。随着浏览器的不断改进，会逐渐兼容所有新样式，这样就可以不需要使用前缀写法来兼容了。
                    - firefox前缀: -moz-;
                    - chrome前缀: -webkit;
                    - opera前缀: -o-;
                    - ie前缀: -ms-;
            */
            border-radius: 24px;
            -webkit-border-radius: 24px;
        }

    </style>
</head>
<body>
<div >W3cSchool</div>
</body>
</html>